<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->


    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font-awesome.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <link rel="stylesheet" href="./css/cate.css">
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="./lib/layui/layui.all.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
                <cite>导航元素</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <section class="app_main">
        <!-- 背景 -->
        <div class="page-box">
            <!-- 第一块 -->
            <div class="yi" id="yikuai">
                <form class="layui-form" action="" id="form-search">

                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-inline" id="fenlei">
                            <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input" id="shuru">
                        </div>

                        <div class="layui-btn-container">
                            <button type="submit" id="sousuo" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="formDemo"><i class="layui-icon layui-icon-search"></i>
                                搜索</button>
                            <button type="button" class="layui-btn layui-btn-primary" style="background-color:whitesmoke;color: white;" id="chongz"><i
                                    class="layui-icon layui-icon-refresh"></i> 重置</button>
                        </div>

                    </div>
                </form>
            </div>
            <!-- 第二块 -->
            <div>
                <!-- 新增 -->
                <div class="xz">
                    <div class="layui-btn-container">
                        <button type="button" id="xinz" class="layui-btn layui-btn-sm layui-btn-normal" style="border: skyblue 1px solid;background-color: rgb(152, 204, 218);"><i
                                class="layui-icon layui-icon-add-1"></i>
                            新增</button>
                        <button type="button" id="dao" class="layui-btn layui-btn-sm layui-btn-normal" style="border: orangered 1px solid;background-color: rgb(231, 198, 171);"><i
                                class="layui-icon layui-icon-download-circle"></i>
                            导出</button>
                    </div>
                    <div class="xzright" id="xzright">
                        <button class="zdy_yuan " id="yu1"><i class="layui-icon layui-icon-screen-restore"></i>
                        </button>
                        <button class="zdy_yuan " id="yu3"><i class="layui-icon layui-icon-screen-full"></i> </button>
                        <button class="zdy_yuan " id="yu5"><i class="layui-icon layui-icon-cols"></i> </button>

                    </div>
                    <div class="xuanz none">
                        <ul>
                            <li><input type="checkbox" id="i1"><span>分类ID</span> </li>
                            <li> <input type="checkbox" id="i2"><span>分类名称</span></li>
                            <li> <input type="checkbox" id="i3"><span>分类class</span></li>
                            <li> <input type="checkbox" id="i4"><span>权重</span></li>
                        </ul>





                    </div>
                    <div class="xzright1 none" id="xzright1">
                        <button class="zdy_yuan " id='yu2'><i class="layui-icon layui-icon-screen-restore"></i></button>
                        <button class="zdy_yuan " id="yu4"><i class="layui-icon layui-icon-screen-full"></i> </button>
                        <button class="zdy_yuan "><i class="layui-icon layui-icon-cols"></i> </button>

                    </div>
                </div>
                <!-- 表格 -->
                <div>
                    <table class="layui-table" lay-size="lg">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>#</th>
                                <th class="tab-id">分类ID</th>
                                <th class="tab-name">分类名称</th>
                                <th class="tab-icon">图标class</th>
                                <th class="tab-num">权重</th>
                                <th class="tac">操作</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <!-- 分页区域 -->
                    <div id="pageBox"></div>

                </div>
                <!-- 列表数据的模板引擎 -->
                <script type="text/html" id="tpl-table">
                    {{each data}}
                    <tr class="a1">
                        <td>{{$index+1}}</td>
                        <td class="tab-id">{{$value.id}}</td>
                        <td class="tab-name">{{$value.catename}}</td>
                        <td class="tab-icon">{{$value.icon}}</td>
                        <td class="tab-num">{{$value.sort_num}}</td>
                        <td>
                            <button class="zdy_yuan1 btn-edit" data-id="{{$value.id}}"> <i class="layui-icon layui-icon-edit"
                          style="color: white;font-size: 18px;"></i></button>
                            <button class="zdy_yuan2 btn-delete" data-id="{{$value.id}}"><i class="layui-icon layui-icon-delete"
                          style="color: white;font-size: 18px;"></i>
                                </td>
                    </tr>
                    {{/each}}
                </script>
                <!-- 添加分类的弹出层 -->
                <script type="text/html" id="dialog-add">
                    <form class="layui-form" id="form-add">
                        <!-- 隐藏域，保存 Id 的值 -->
                        <input type="hidden" name="id">
                        <div class="layui-form-item wi">
                            <label class="layui-form-label">分类名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item wi">
                            <label class="layui-form-label">权重</label>
                            <div class="layui-input-block">
                                <input type="text" name="sort_num" required lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item wi">
                            <label class="layui-form-label">图标class</label>
                            
                                <button type="button" class="layui-btn jia1"><i
                                    class="layui-icon layui-icon-add-1"></i></button>

                            <input type="text" aria-label="描述文字" role="spinbutton" name="icon" required lay-verify="required" placeholder="100" autocomplete="off" class="layui-input jia">
                            <button type="button" class="layui-btn jia1">
<span class="jian">-</span>
                                
                            </button>

            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">

                    <button class="layui-btn layui-btn-sm layui-btn-normal tian" type="submit" id="quer" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" id="cancle" class="layui-btn layui-btn-primary">取消</button>
                </div>
            </div>
            </form>
            </script>
            <!-- 修改分类的弹出层 -->
            <script type="text/html" id="dialog-edit">
                <form class="layui-form" id="form-edit" lay-filter="form-edit">
                    <!-- 隐藏域，保存 Id 的值 -->
                    <input type="hidden" name="id">
                    <div class="layui-form-item wi">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item wi">
                        <label class="layui-form-label">权重</label>
                        <div class="layui-input-block">
                            <input type="text" name="sort_num" required lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item wi">
                        <label class="layui-form-label">图标class</label>

                        <button type="button" class="layui-btn jia1"><i
                                class="layui-icon layui-icon-add-1"></i></button>

                        <input type="text" aria-label="描述文字" role="spinbutton" name="icon" required lay-verify="required" placeholder="100" autocomplete="off" class="layui-input jia">
                        <button type="button" class="layui-btn jia1">
<span class="jian">-</span>
                            
                        </button>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">

                            <button class="layui-btn layui-btn-sm layui-btn-normal tian" type="submit" id="quer" lay-submit lay-filter="formDemo">确认修改</button>
                            <button type="reset" id="cancle" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                    </div>
                </form>
            </script>
        </div>
        </div>
    </section>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/baseAPi.js"></script>
    <script src="./lib/tem/template-web.js"></script>


    <script src="./js/cate.js"></script>
</body>

</html>